import React, { useState, useEffect } from 'react'
import Infomessg from "./infomessg"
import Activemessg from "./activemessg"
import { Button, Steps, Form, message } from "antd"
import dayjs from 'dayjs'
import "./index.less"
import { request, useLocation } from 'umi'
import moment from 'moment'
export default function index() {
    let { query: { titles, activityBasicId } }: any = useLocation()
    const [data, setData] = useState<any>()
    const [cityCode, setcityCode] = useState()
    const [isNextNum, setIsNextNum] = useState(true)
    const [isShow, setIsShow] = useState(false)
    const [tarArr, setTatArr] = useState<any>()
    const [editOper, setEditOper] = useState([])
    const [editRquire, setEditRquire] = useState([])
    const [sTime, setStime] = useState("")
    const [eTime, setEtime] = useState("")
    const [showTar, setShowTar] = useState()
    const [showPanel, setShowPanel] = useState()
    const [getTagNameList, setGetTagName] = useState<any>([])
    const [current, setCurrent] = useState(0);
    const [baseForm] = Form.useForm();
    const [BMform] = Form.useForm();
    const [TPform] = Form.useForm();
    const [baseParms, setBaseParms] = useState<any>()
    const [scheduleVOSs, setscheduleVOS] = useState<any>()
    const [activityVOSs, setactivityVOS] = useState()
    const { Step } = Steps;
    const steps = [
        {
            title: '基本信息',
        },
        {
            title: '活动信息',
        },
    ];
    const isNext = async () => {
        let BF = await baseForm.validateFields()
        setIsNextNum(false)
        let scheduleVOS = BF.users ? BF.users.map((ele: any) => {
            return {
                scheduleName: ele.first,
                scheduleDate: dayjs(ele.last._d).format("YYYY-MM-DD HH:mm:ss")
            }
        }) : []
        setscheduleVOS(scheduleVOS)
        if (titles != "edit") {
            setBaseParms({
                activityName: BF.activityName,
                activityContent: BF.activityContent,
                activitySite: BF.activitySite ? BF.activitySite : "",
                activityOrganizers: BF.activityOrganizers ? BF.activityOrganizers : "",
                startDate: dayjs(BF['range-picker'][0]._d).format("YYYY-MM-DD HH:MM:ss"),
                endDate: dayjs(BF['range-picker'][1]._d).format("YYYY-MM-DD HH:MM:ss"),
                pictureKey: BF.activeImg[0].response.data.imgKey,
                pictureUrl: BF.activeImg[0].response.data.imgUrl,
                thumbnailPictureKey: BF.activeThumb[0].response.data.imgKey,
                thumbnailPictureUrl: BF.activeThumb[0].response.data.imgUrl,
                provinceCode: BF.selectAddress[0],
                cityCode: BF.selectAddress[1],
                isSignUp: true,
                isRobTickets: false,
                isSignIn: false,
                isVote: false,
                isLuckyDraw: false,
                scheduleVOS: scheduleVOS ? scheduleVOS : "",
                activityVOS: activityVOSs ? activityVOSs : ""
            })
        } else {
            setBaseParms({
                ...baseParms,
                pictureKey: BF.activeImg[0].response ? BF.activeImg[0].response.data.imgKey : BF.activeImg[0].key,
                pictureUrl: BF.activeImg[0].response ? BF.activeImg[0].response.data.imgUrl : BF.activeImg[0].url,
                thumbnailPictureKey: BF.activeThumb[0].response ? BF.activeThumb[0].response.data.imgKey : BF.activeThumb[0].key,
                thumbnailPictureUrl: BF.activeThumb[0].response ? BF.activeThumb[0].response.data.imgUrl : BF.activeThumb[0].url,
                activityName: BF.activityName,
                activityContent: BF.activityContent,
                activitySite: BF.activitySite ? BF.activitySite : "",
                activityOrganizers: BF.activityOrganizers ? BF.activityOrganizers : "",
                startDate: dayjs(BF['range-picker'][0]._d).format("YYYY-MM-DD HH:MM:ss"),
                endDate: dayjs(BF['range-picker'][1]._d).format("YYYY-MM-DD HH:MM:ss"),
                provinceCode: BF.selectAddress[0],
                cityCode: BF.selectAddress[1],
                isSignUp: true,
                isRobTickets: false,
                isSignIn: false,
                isVote: false,
                isLuckyDraw: false,
                scheduleVOS: scheduleVOS ? scheduleVOS : "",
                activityVOS: activityVOSs ? activityVOSs : ""
            })
        }
        setCurrent(current + 1);
        setIsShow(true)
    }
    const isPre = () => {
        setCurrent(current - 1);
        setIsShow(false)
        setIsNextNum(true)
    }
    const savelist = () => {
        let BM = BMform.getFieldsValue()
        let BF = baseForm.getFieldsValue()
        let TP = TPform.getFieldsValue();
        let isdata = data ? data.activityVOS : undefined
        console.log(isdata, "isdata")
        let isShow = {
            isSignUp: false,
            isRobTickets: false,
            isSignIn: false,
            isVote: false,
            isLuckyDraw: false,
        }
        let ATE: any = []
        if (getTagNameList.indexOf("1") > -1) {
            isShow.isSignUp = true
            ATE.push({
                "activityType": 1,
                "startDate": dayjs(BM.activeTime ? BM.activeTime[0]._d : sTime).format("YYYY-MM-DD HH:mm:ss"),
                "endDate": dayjs(BM.activeTime ? BM.activeTime[1]._d : eTime).format("YYYY-MM-DD HH:mm:ss"),
                "numberLimit": BM.numberLimit,
                "requiredEntryForms": tarArr ? tarArr.map((ele: any) => {
                    return {
                        key: ele
                    }
                }) : editRquire,
                "optionalEntryForms": BM.users ? BM.users.map((ele: any) => {
                    return {
                        key: ele.first
                    }
                }) : editOper,
            })
        }
        if (getTagNameList.indexOf("2") > -1) {
            isShow.isVote = true
            let Newuser = TP.users ? TP.users.map((ele: any) => {
                return {
                    instructions: ele.last,
                    name: ele.first,
                    pictureUrl: ele.three[0].response ? ele.three[0].response.data.imgUrl : ele.three[0].url,
                    pictureKey: ele.three[0].response ? ele.three[0].response.data.imgKey : ele.three[0].key
                }
            }) : []
            let Edituser = isdata ? isdata[1].voteObjectVOS.map((ele: any) => {
                let keyStr = ele.pictureKey.split("image/")
                let urlStr = ele.pictureUrl.split("image/")
                let key = `${keyStr[0]}image/${keyStr[2]}`
                let url = `${urlStr[2]}`
                return {
                    instructions: ele.instructions,
                    name: ele.name,
                    // pictureUrl: url,
                    // pictureKey: key
                    pictureUrl: ele.pictureUrl,
                    pictureKey: ele.pictureKey
                }
            }) : []
            console.log(Edituser, "Edituser")
            ATE.push({
                "activityType": 2,
                "voteWay": "2",
                "dayVoteLimit": "10",
                "singlePlayerLimit": "10",
                "startDate": dayjs(isdata ? isdata[1].startDate : TP.activeTime[0]._d).format("YYYY-MM-DD HH:mm:ss"),
                "endDate": dayjs(isdata ? isdata[1].endDate : TP.activeTime[1]._d).format("YYYY-MM-DD HH:mm:ss"),
                // 投票
                "voteObjectVOS": isdata ? Edituser : Newuser,
            })
        }
        setactivityVOS(ATE)
        let scheduleVOS = BF.users ? BF.users.map((ele: any) => {
            return {
                scheduleName: ele.first,
                scheduleDate: dayjs(ele.last._d).format("YYYY-MM-DD HH:mm:ss")
            }
        }) : scheduleVOSs
        let baseParmss = {
            ...baseParms,
            activityName: isNextNum ? BF.activityName : baseParms.activityName,
            activityContent: isNextNum ? BF.activityContent : baseParms.activityContent,
            activitySite: isNextNum ? BF.activitySite : baseParms.activitySite,
            activityOrganizers: isNextNum ? BF.activityOrganizers : baseParms.activityOrganizers,
            startDate: isNextNum ? dayjs(BF['range-picker'][0]._d).format("YYYY-MM-DD HH:MM:ss") : baseParms.startDate,
            endDate: isNextNum ? dayjs(BF['range-picker'][1]._d).format("YYYY-MM-DD HH:MM:ss") : baseParms.endDate,
            pictureKey: isNextNum ? BF.activeImg[0].response ? BF.activeImg[0].response.data.imgKey : BF.activeImg[0].key : baseParms.pictureKey,
            pictureUrl: isNextNum ? BF.activeImg[0].response ? BF.activeImg[0].response.data.imgimgUrl : BF.activeImg[0].key : baseParms.pictureUrl,
            thumbnailPictureKey: isNextNum ? BF.activeThumb[0].key : baseParms.thumbnailPictureKey,
            thumbnailPictureUrl: isNextNum ? BF.activeThumb[0].url : baseParms.thumbnailPictureUrl,
            provinceCode: isNextNum ? BF.selectAddress[0] : baseParms.provinceCode,
            cityCode: isNextNum ? BF.selectAddress[1] : baseParms.cityCode,
            ...isShow,
            activityVOS: ATE,
            scheduleVOS: scheduleVOS,
        }
        request("/campus/campusweb/activity/saveDrafts", {
            method: "post",
            data: baseParmss
        }).then(res => {
            if (res.code == 200) {
                message.success(res.message)
            } else {
                message.error(res.message)
            }
        })
    }
    const issueList = () => {
        let BM = BMform.getFieldsValue()
        let TP = TPform.getFieldsValue()
        let BF = baseForm.getFieldsValue()
        let isShow = {
            isSignUp: false,
            isRobTickets: false,
            isSignIn: false,
            isVote: false,
            isLuckyDraw: false,
        }
        let ATE: any = []
        if (getTagNameList.indexOf("1") > -1) {
            isShow.isSignUp = true
            ATE.push({
                "activityType": 1,
                "startDate": dayjs(BM.activeTime ? BM.activeTime[0]._d : "").format("YYYY-MM-DD HH:mm:ss"),
                "endDate": dayjs(BM.activeTime ? BM.activeTime[1]._d : "").format("YYYY-MM-DD HH:mm:ss"),
                "numberLimit": BM.numberLimit,
                "requiredEntryForms": tarArr.map((ele: any) => {
                    return {
                        key: ele
                    }
                }),
                "optionalEntryForms": BM.users ? BM.users.map((ele: any) => {
                    return {
                        key: ele.first
                    }
                }) : []
            })
        }
        if (getTagNameList.indexOf("2") > -1) {
            isShow.isVote = true
            ATE.push({
                "activityType": 2,
                "startDate": dayjs(BM.activeTime[0]._d).format("YYYY-MM-DD HH:mm:ss"),
                "endDate": dayjs(BM.activeTime[1]._d).format("YYYY-MM-DD HH:mm:ss"),
                "numberLimit": BM.numberLimit,
                "voteWay": "2",
                "dayVoteLimit": "10",
                "singlePlayerLimit": "10",
                // 投票
                "voteObjectVOS": TP.users ? TP.users.map((ele: any) => {
                    return {
                        instructions: ele.last,
                        name: ele.first,
                        pictureUrl: ele.three[0].response ? ele.three[0].response.data.imgUrl : ele.three[0].url,
                        pictureKey: ele.three[0].response ? ele.three[0].response.data.imgKey : ele.three[0].key
                    }
                }) : []
            })
        }
        setactivityVOS(ATE)
        let baseParmss = {
            ...baseParms,
            ...isShow,
            activityVOS: ATE,
            scheduleVOS: scheduleVOSs
        }
        request("/campus/campusweb/activity/addActivity", {
            method: "post",
            data: baseParmss
        }).then(res => {
            if (res.code == 200) {
                message.success(res.message)
            } else {
                message.error(res.message)
            }
        })
    }
    const isAave = () => {
        savelist()
    }
    const issue = () => {
        issueList()
    }
    const detialList = () => {
        request("/campus/campusweb/activity/queryByUpdate", {
            method: 'post',
            data: {
                activityBasicId,
            }
        }).then(res => {
            console.log(res.data, 'data')
            setcityCode(res.data.cityCode)
            let s = dayjs(res.data.activityVOS[0].startDate).format("YYYY-MM-DD HH:mm:ss")
            let e = dayjs(res.data.activityVOS[0].endDate).format("YYYY-MM-DD HH:mm:ss")
            setStime(s)
            setEtime(e)
            let resParmas = {
                activityBasicId: res.data.activityBasicId,
                activityContent: res.data.activityContent,
                activityName: res.data.activityName,
                activityOrganizers: res.data.activityOrganizers,
                activitySite: res.data.activitySite,
                activityVOS: res.data.activityVOS,
                cityCode: res.data.cityCode,
                cityName: res.data.cityName,
                endDate: res.data.endDate,
                isLuckyDraw: res.data.isLuckyDraw,
                isRobTickets: res.data.isRobTickets,
                isSignIn: res.data.isSignIn,
                isSignUp: res.data.isSignUp,
                isVote: res.data.isVote,
                pictureKey: res.data.pictureKey,
                pictureUrl: res.data.pictureUrl,
                provinceCode: res.data.provinceCode,
                provinceName: res.data.provinceName,
                scheduleVOS: res.data.scheduleVOS,
                startDate: res.data.startDate,
                thumbnailPictureKey: res.data.thumbnailPictureKey,
                thumbnailPictureUrl: res.data.thumbnailPictureUrl,
            }
            let oper = res.data.activityVOS[0].optionalEntryForms ? res.data.activityVOS[0].optionalEntryForms.map((ele: any) => {
                return {
                    key: ele.key
                }
            }) : []
            setEditOper(oper)
            let req = res.data.activityVOS[0].requiredEntryForms ? res.data.activityVOS[0].requiredEntryForms.map((ele: any) => {
                return {
                    key: ele.key
                }
            }) : []
            setEditRquire(req)
            let tag = res.data.activityVOS ? res.data.activityVOS.map((ele: any) => {
                return ele.activityType + ""
            }) : []
            setGetTagName(tag)
            if (res.code == 200) {
                setData(res.data)
                setBaseParms({
                    ...baseParms,
                    ...resParmas
                })
                let activeImg = [{
                    uid: 1,
                    url: res?.data?.pictureUrl,
                    key: res?.data?.pictureKey,
                }]
                let activeThumb = [{
                    uid: 2,
                    url: res?.data?.thumbnailPictureUrl,
                    key: res?.data?.thumbnailPictureKey
                }]
                let users = res.data.scheduleVOS ? res.data.scheduleVOS.map((ele: any) => {
                    return {
                        first: ele.scheduleName,
                        last: moment(ele.scheduleDate)
                    }
                }) : []
                let params = {
                    activityName: res.data.activityName ? res.data.activityName : '',
                    selectAddress: [res.data.provinceCode, res.data.cityCode] ? [res.data.provinceCode, res.data.cityCode] : "",
                    'range-picker': [moment(res.data.startDate), moment(res.data.endDate)] ? [moment(res.data.startDate), moment(res.data.endDate)] : "",
                    activitySite: res.data.activitySite ? res.data.activitySite : "",
                    activityOrganizers: res.data.activityOrganizers ? res.data.activityOrganizers : "",
                    activityContent: res.data.activityContent ? res.data.activityContent : "",
                    activeImg: activeImg ? activeImg : '',
                    activeThumb: activeThumb ? activeThumb : '',
                    users: users ? users : ""
                }
                baseForm.setFieldsValue(params)
                let bm = res.data.activityVOS[0] ? res.data.activityVOS[0] : []
                let tag = bm.requiredEntryForms ? bm.requiredEntryForms.map((ele: any) => {
                    return ele.key
                }) : []
                setShowTar(tag)
                let Panel = res.data.activityVOS ? res.data.activityVOS.map((ele: any) => {
                    return ele.activityType + ""
                }) : []
                setShowPanel(Panel)
                let bmusers = bm.optionalEntryForms ? bm.optionalEntryForms.map((ele: any) => {
                    return {
                        first: ele.key
                    }
                }) : []
                BMform.setFieldsValue({
                    activeTime: [moment(bm.startDate), moment(bm.endDate)] ? [moment(bm.startDate), moment(bm.endDate)] : "",
                    numberLimit: bm.numberLimit,
                    users: bmusers ? bmusers : ""
                })
                let tp = res.data.activityVOS[1] ? res.data.activityVOS[1] : []
                let tpusers = tp.voteObjectVOS ? tp.voteObjectVOS.map((ele: any) => {
                    return {
                        first: ele.name,
                        last: ele.instructions,
                        three: [
                            {
                                uid: 1,
                                key: ele.pictureKey,
                                url: ele.pictureUrl
                            }
                        ]

                    }
                }) : []
                TPform.setFieldsValue({
                    activeTime: [moment(tp.startDate), moment(tp.endDate)] ? [moment(tp.startDate), moment(tp.endDate)] : "",
                    selectAddress: tp.activityType,
                    users: tpusers ? tpusers : []
                })
            }
        })
    }
    const getTag = (n: any) => {
        setTatArr(n)
    }
    const getTagName = (n: any) => {
        setGetTagName(n)
    }
    useEffect(() => {
        if (titles == "edit") {
            detialList()
        }
    }, [])
    return (
        <div>
            <div className='createActiveMessg'>
                <h1>创建活动</h1>
                <div>
                    <Steps current={current}>
                        {steps.map(item => (
                            <Step key={item.title} title={item.title} />
                        ))}
                    </Steps>
                </div>
            </div>
            {!isShow && <Infomessg
                baseForm={baseForm}
            ></Infomessg>}
            {isShow && <Activemessg
                BMform={BMform}
                TPform={TPform}
                getTag={getTag}
                getTagName={getTagName}
                showTar={showTar}
                titles={titles}
                showPanel={showPanel}
            ></Activemessg>}
            <div className='activeBtn' style={{ marginTop: "60px" }}>
                {
                    !isShow && <Button
                        style={{ color: "#fff", backgroundColor: "#0A1F44" }}
                        onClick={isNext}
                    >下一步</Button>
                }
                {
                    isShow &&
                    <>
                        <Button
                            onClick={issue}
                            style={{ color: "#fff", backgroundColor: "#0A1F44" }}
                        >发布</Button>
                        <Button onClick={isPre}>上一步</Button>
                    </>
                }
                <Button>预览</Button>
                <Button onClick={isAave}>保存草稿</Button>
            </div>
        </div>
    )
}

